<template>
  <div>
    <div class="heade_one">
      <a href="#" @click="go()"><img src="/img/back.png" alt=""/></a>
      <div class="search">
        <input
          type="text"
          placeholder="请输入搜索关键词"
          v-model="value"
          @keyup.13="getdata()"
        />
      </div>
      <p @click="del()">取消</p>
    </div>
    <div class="record">
      <div class="once">
        <h3>历史记录</h3>
        <h3 @click="up()">清空</h3>
      </div>
      <div class="inonce">
        <ul>
          <li v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import goodsApi from "../api/goodsApi";
export default {
  data() {
    return {
      value: null,
      //content: null,
      list: []
    };
  },

  components: {},

  methods: {
    //返回上级
    go() {
      this.$router.push("/home");
    },
    del() {
      //清除input框内容
      this.value = "";
    },
    //存入本地以及渲染
    getdata() {
      this.list.push(this.value);
      localStorage.setItem("content", this.list);
      let i = localStorage.getItem("content");
      let data = this.value;
      //发请求
      goodsApi
        .getGoods({ sports:`${data}`})
        .then(res => {
          //console.log(res.data, 1);
          console.log(res.data.code);
          //判断状态跳转
          if(res.data.code){
            this.$router.push("/show");
          }else{
            this.$router.push("/failed");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //清空历史记录
    up() {
      this.list = [];
      //删除指定缓存
      localStorage.removeItem("content");
    }
  },
  created() {
    //判断 看懂的都懂 不多做解释
    if (localStorage.getItem("content")) {
      let s = localStorage.getItem("content").split(",");
      this.list = s;
    }
  },
  watch: {}
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
.heade_one {
  display: flex;
  width: vw(750);
  background: #f5f5f5;
  a img {
    height: vw(100);
  }
  .search {
    height: vw(100);

    input {
      width: vw(500);
      height: vw(60);
      border-radius: vw(45);
      margin-left: vw(25);
      margin-top: vw(20);
      border: 0;
    }
  }
  p {
    font-size: vw(30);
    margin-left: vw(30);
    margin-top: vw(29);
    color: #999;
  }
}
.record .once {
  display: flex;
  height: vw(130);
  padding: 0 vw(15);
  justify-content: space-between;
  h3 {
    line-height: vw(130);
    color: #999;
  }
}
ul {
  display: flex;
  width: vw(750);
  flex-wrap: wrap;
  li {
    background: #f0f1f2;
    padding: 0 vw(20);
    height: vw(70);
    line-height: vw(70);
    margin: vw(20) vw(20);
    text-align: center;
    border-radius: vw(20);
  }
}
</style>